<!--
  - Copyright(c)  2022 厦门外里科技有限公司 All rights reserved.
  -
  - https://www.wailikeji.com
  -
  - 版权所有，侵权必究！
  -->

<template>
	<view class="scrool-page">
		<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="loadMore" lower-threshold="10upx">
			<view class="page-box">
				<view v-for="(item, index) in itemList" :key="index" class="order">
					<view>
						<view style="margin-bottom: 8upx;text-align: right;">
							<text style="margin-bottom: 8upx;color: #0e80d2">
								{{getActionTypeName(item.actionType)}}</text>
						</view>
						<view style="color: #999999;font-size: 28upx;">
							<view style="margin-bottom: 8upx">
								类型：{{getActionTypeName(item.actionType)}}
							</view>
							<view style="margin-bottom: 8upx"> 剩余：{{item.remainValue}}¥
							</view>
							<view style="margin-bottom: 8upx" v-if="item.remarks"> 备注：{{item.remarks}}
							</view>
							<view style="margin-bottom: 8upx"> 时间：{{item.createTime}}</view>
							<view
								style="display: flex;float:right; margin-top: -45upx; margin-bottom: 0upx;text-align: right;">
								<!-- 提现金额： -->
								<view style="display: flex;float:right;">
									<text v-if="item.changeNum>0" style=" color: #FD6416;font-size: 32upx;font-weight: 600">
										¥ {{"+"+item.changeNum}}
									</text>
									<text v-else style=" color: #4fc08d;font-size: 32upx;font-weight: 600">
										¥ {{item.changeNum}}
									</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore v-if="itemList.length>5" :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
				<view v-if="itemList.length===0" style="text-align: center;margin-top: 60px">暂无记录</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				curPage: 0,
				itemList: []
			}
		},
		onShow() {
			if (this.itemList.length == 0) {
				this.loadMore()
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.refresh()
		},
		methods: {
			getActionTypeName(actionType) {
				if (actionType === 1) {
					return "购买金豆套餐"
				} else if (actionType === 2) {
					return "看群"
				} else if (actionType === 3) {
					return "发布群"
				} else if (actionType === 4) {
					return "签到"
				} else if (actionType === 5) {
					return "邀请"
				} else if (actionType === 6) {
					return "置顶群"
				}
			},
			/**
			 * 刷新
			 */
			refresh() {
				this.itemList = []
				this.curPage = 0
				this.loadStatus = 'loadmore'
				this.loadMore()

			},
			loadMore() {
				if (this.loadStatus == 'nomore') {
					return
				}
				//加载中
				this.loadStatus = 'loading';
				let page = this.curPage + 1
				this.$api.api('billChangeGold.list', {
						"pageNum": page,
						"pageSize": 10,
						"orderByColumn": "createTime",
						"isAsc": "descending"
					})
					.then(res => {
						if (res.code == 200) {
							this.itemList = this.itemList.concat(res.rows)
							if (res.total > this.itemList.length) {
								this.loadStatus = 'loadmore';
								this.curPage++;
							} else {
								this.loadStatus = 'nomore';
							}
							console.log(this.loadStatus)
						} else {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: res.msg
							});
						}
						uni.stopPullDownRefresh(); //停止下拉刷新动画
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%; //加载更多需要
		background: #f8f8f8;
	}

	.scrool-page {
		height: 100%; //加载更多需要
	}

	.order {
		background-color: #ffffff;
		margin: 32rpx; //上下间距
		border-radius: 20rpx; //倒角
		padding: 32rpx;
		font-size: 28rpx;
		box-shadow: 0 2upx 2upx rgba(183, 183, 183, 0.3); //周边阴影
	}
</style>
